<template>
	<div class="header-search">
		<i class="iconfont iconsearch" @click.stop="click"></i>
		<input slot="reference" placeholder="搜索文章,分类" ref="searchInput" :class="{'show':show}" v-model="searchValue"
			type="text" @click.stop="" @keyup.enter="search" />
		<el-dialog title="搜索结果" :visible.sync="dialogVisible" width="70%" custom-class="result"
			:modal-append-to-body="false">
			<div class="wbody" :key="reload">
				<div class="articles">
					<section-title>{{articles_title}}</section-title>
					<template v-if="postList.length > 0">
						<post v-for="(item,index) in postList" :post="item" :key="item.id"></post>
					</template>
					<template v-else><i class="el-icon-warning-outline"></i>
						暂无内容</template>
				</div>
				<div class="categorys">
					<section-title>分类结果</section-title>
					<categoryNav ref="child" :activeFun="activeFun" :categoryNavs="categoryNavs"></categoryNav>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		search
	} from "@/api/search.js"
	import Post from '@/components/post2'
	import sectionTitle from '@/components/section-title'
	import categoryNav from '@/components/category/category_nav.vue'
	import {
		queryArticlesBOLC
	} from '@/api/blog.js'
	export default {
		name: "header-search",
		data() {
			return {
				searchValue: '',
				show: false,
				dialogVisible: false,
				postList: [],
				categoryNavs: [],
				articles_title: "文章结果",
				reload: 0
			}
		},
		watch: {
			show(value) {
				if (value) {
					document.body.addEventListener('click', this.close)
				} else {
					document.body.removeEventListener('click', this.close)
				}
			},
			reload() {
				this.articles_title = "文章结果"
			}
		},
		methods: {
			search() {
				if (this.searchValue) {
					search(this.searchValue).then(res => {
						this.postList = res.data[0];
						this.categoryNavs = res.data[1];
					});
					this.close()
					this.dialogVisible = true;
				}
			},
			click() {
				this.searchValue = ''
				this.show = !this.show
				if (this.show) {
					this.$refs.searchInput && this.$refs.searchInput.focus();
				}
			},
			close() {
				this.$refs.searchInput && this.$refs.searchInput.blur()
				this.show = false
				this.reload++;
			},
			activeFun(id, name) {
				this.articles_title = "“" + name + "”分类的文章";
				console.log(id, name)
				var data = {
					pageNo: 1,
					pageSize: 100,
					id: id
				}
				queryArticlesBOLC(data).then(res => {
					this.postList = res.data.data || []
				})
			}
		},
		components: {
			Post,
			sectionTitle,
			categoryNav
		}
	}
</script>
<style lang="less">
	.header-search {
		.el-dialog__header {
			padding: 8px;

			.el-dialog__title {
				line-height: 0;
			}
		}

		.result {
			height: 550px;

			.el-dialog__header {
				height: 10%;
					display: block !important;
			}

			.el-dialog__body {
				text-align: left;
				padding: 10px;
				line-height: normal;
				overflow-y: auto;
				height: 90%;
				background-color: #F5F5F5;


				.articles {
					display: inline-block;
					margin: 10px;
					width: 65%;
					/* border: 1px solid #F5F5F5; */
					padding: 10px 20px;
					background-color: #FFFFFF;

					hr {
						height: 0px !important;
					}

					.post-entry {
						height: 90px;

						.entry-title {
							font-size: 15px !important;
							width: 60%;

							span {
								font-size: 15px !important;
							}

							line-height: 25px;
						}

						.p-time {
							top: 6px;
						}

						.summary {
							left: 50px;
							font-size: 12px;
							line-height: 20px;
							/* white-space: nowrap; */
							max-height: 60px;
							overflow: auto;
							text-overflow: ellipsis;
						}

						.el-image {
							margin-right: 0 !important;
							width: 50px !important;
							border-radius: 5px !important;

							.image-slot {
								border-radius: 5px !important;
								width: 50px !important;
								height: 40px !important;
							}

							img {
								width: 50px;
								height: 40px;
								border-radius: 5px !important;
							}
						}
					}

					.entry-footer {
						.iconfish-li {
							font-size: 12px !important;
						}
					}
				}

				.wbody {
					position: relative;
				}

				.categorys {
					display: inline-block;
					width: 30%;
					margin: 10px;
					position: absolute;
					right: 0;
					background-color: #FFFFFF;
					padding: 10px 20px;

					li {
						padding: 5px;
						font-size: 12px;
					}
				}
			}
		}
	}
</style>
<style scoped lang="less">
	.header-search {
		display: inline-block;
		position: relative;

		i {
			font-size: 18px;
			position: relative;
			top: 3px;
		}

		input::placeholder {
			color: #FFFFFF;
		}

		input {
			border: none;
			border-bottom: 1px solid #FFFFFF;
			outline: none;
			overflow: hidden;
			background: transparent;
			height: 30px;
			width: 0;
			transition: .2s all;
			color: #FFFFFF;

			&.show {
				width: 200px;
				margin-left: 10px;
			}

			&:focus {
				border-bottom: 1px solid #2ea7e0;
			}
		}

		.iconsearch:hover {
			color: #2ea7e0;
		}
	}
</style>
<!-- 手机适应 -->
<style lang="less">
	@media screen and (max-width: 1024px) {
		.header-search {
			.result {
				width: 90% !important;
				margin: 0 auto !important;
				margin-top: 10px !important;
				.articles{
					width: 100% !important;
					margin: 0;
				}
				.categorys{
					display: none !important;
				}
				.el-dialog__title{
					margin-top: 20px;
					display: inline-block;
				}
				.entry-title{
					margin-left: 0 !important;
					span{
						margin-left: 0 !important;
					}
				}
			}
		}
	}
</style>
